const path = require('path')

// 这个配置文件，其实就是一个 js文件，通过 Node 中的模块操作，向外暴露了一个 配置对象
module.exports = {
	entry:'./src/main.js',	// 入口，表示，要使用webpack打包哪个文件
	output:{ // 输出文件的相关配置
		path : path.resolve(__dirname, 'dist'),	// 指定打包好的文件，输出到哪个目录
		filename : 'bundle.js'	// 这是指定，输出文件的名称
	},
	module: {
		// 这个节点，用与配置所有 第三方模块 加载器
		rules : [
			// 所有第三方模块的 匹配规则
			{ test : /\.css$/, use : ['style-loader', 'css-loader']}, // 配置处理 .css文件的第三方loader规则
			{ test : /\.less$/, use : ['style-loader', 'css-loader', 'less-loader']}, // 配置处理 .css文件的第三方loader规则
			{ test : /\.scss$/, use : ['style-loader', 'css-loader', 'sass-loader']} // 配置处理 .css文件的第三方loader规则
		]
	}
}

// 当我们在控制台，直接输入 webpack命令执行的时候，webpack 做了以下几步
// 1.首先，webpzck发现，我们并没有通过命令的形式，给它指定入口和出口
// 2.webpack就会去 项目的根目录中，查找一个叫做 webpack.config.js 的配置文件
// 3.当找到配置文件后，webpack会去解析执行这个配置文件，当解析执行完配置文件后，
// 就得到了配置文件中，导出的配置对象
// 4.当webpack拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建


/*

npm i webpack-dev-server -D
npm i style-loader css-loader -D


npm i less-loader -D
npm i less -D

npm i sass -D
npm i node-sass -D
 */